MkTabbed

Show source on GitHub

PyMdown-based Tab container.

ExamplesDocStringsBase classes⋔ Inheritance diagramNodeFileCode

Example: Regular

Jinja

{{ {"Tab 1": "Some markdown", "Tab 2": "Other Markdown"} | MkTabbed}}

Python

MkTabbed(tabs=[...])

RenderedMarkdownHtmlRepr tree

Tab 1Tab 2

Some markdown

Other Markdown

===! "Tab 1"
    Some markdown

=== "Tab 2"
    Other Markdown

<div class="tabbed-set" data-tabs="1:2"><input checked id="__tabbed_1_1" name="__tabbed_1" type="radio"><label for="__tabbed_1_1">Tab 1</label><div class="tabbed-content">
<p>Some markdown</p>
</div>
<input id="__tabbed_1_2" name="__tabbed_1" type="radio"><label for="__tabbed_1_2">Tab 2</label><div class="tabbed-content">
<p>Other Markdown</p>
</div>
</div>

MkTabbed
├── MkTab(title='Tab 1', content='Some markdown', new=True)
│   ╰── MkText('Some markdown')
╰── MkTab(title='Tab 2', content='Other Markdown')
    ╰── MkText('Other Markdown')

Example: Nested

Jinja

{% set node = {"Tab 1": "Some markdown", "Tab 2": "Other Markdown"} | MkTabbed %}
{{ {"Tabs": node, "Admonition": mk.MkAdmonition("Nested admonition")} | MkTabbed }}

Python

MkContainer([...])

RenderedMarkdownHtmlRepr tree

Tab 1Tab 2

Some markdown

Other Markdown

Info

Nested admonition

TabsAdmonition

Tab 1Tab 2

Some markdown

Other Markdown

Info

Nested admonition

===! "Tab 1"
    Some markdown

=== "Tab 2"
    Other Markdown


!!! info
    Nested admonition


===! "Tabs"
    ===! "Tab 1"
        Some markdown

    === "Tab 2"
        Other Markdown

=== "Admonition"
    !!! info
        Nested admonition

<div class="tabbed-set" data-tabs="1:2"><input checked id="__tabbed_1_1" name="__tabbed_1" type="radio"><label for="__tabbed_1_1">Tab 1</label><div class="tabbed-content">
<p>Some markdown</p>
</div>
<input id="__tabbed_1_2" name="__tabbed_1" type="radio"><label for="__tabbed_1_2">Tab 2</label><div class="tabbed-content">
<p>Other Markdown</p>
</div>
</div>
<div class="admonition info">
<p class="admonition-title">Info</p>
<p>Nested admonition</p>
</div>
<div class="tabbed-set" data-tabs="2:2"><input checked id="__tabbed_2_1" name="__tabbed_2" type="radio"><label for="__tabbed_2_1">Tabs</label><div class="tabbed-content">
<div class="tabbed-set" data-tabs="3:2"><input checked id="__tabbed_3_1" name="__tabbed_3" type="radio"><label for="__tabbed_3_1">Tab 1</label><div class="tabbed-content">
<p>Some markdown</p>
</div>
<input id="__tabbed_3_2" name="__tabbed_3" type="radio"><label for="__tabbed_3_2">Tab 2</label><div class="tabbed-content">
<p>Other Markdown</p>
</div>
</div>
</div>
<input id="__tabbed_2_2" name="__tabbed_2" type="radio"><label for="__tabbed_2_2">Admonition</label><div class="tabbed-content">
<div class="admonition info">
<p class="admonition-title">Info</p>
<p>Nested admonition</p>
</div>
</div>
</div>

MkContainer
├── MkTabbed(tabs=[...])
│   ├── MkTab(title='Tab 1', content='Some markdown', new=True)
│   │   ╰── MkText('Some markdown')
│   ╰── MkTab(title='Tab 2', content='Other Markdown')
│       ╰── MkText('Other Markdown')
├── MkAdmonition('Nested admonition')
│   ╰── MkText('Nested admonition')
╰── MkTabbed(tabs=[...])
    ├── MkTab(title='Tabs', content=MkTabbed(tabs=[...]), new=True)
├── MkTabbed(tabs=[...])
│   ├── MkTab(title='Tab 1', content='Some markdown', new=True)
│   │   ╰── MkText('Some markdown')
│   ╰── MkTab(title='Tab 2', content='Other Markdown')
│       ╰── MkText('Other Markdown')
│   ╰── MkTab(title='Admonition', content=MkAdmonition('Nested admonition'))
├── MkAdmonition('Nested admonition')
│   ╰── MkText('Nested admonition')

Bases: MkTabContainer

Name	Children	Inherits
MkTabContainer mknodes.basenodes.mktabcontainer Base class for nodes containing tabs.	MkTabbedBlocks MkTabbed	MkContainer

graph TD
  94721311933888["mktabbed.MkTabbed"]
  94721311947536["mktabcontainer.MkTabContainer"]
  94721311697232["mkcontainer.MkContainer"]
  94721308848336["mknode.MkNode"]
  94721311766592["node.Node"]
  140564252373184["builtins.object"]
  94721311947536 --> 94721311933888
  94721311697232 --> 94721311947536
  94721308848336 --> 94721311697232
  94721311766592 --> 94721308848336
  140564252373184 --> 94721311766592

/home/runner/work/mknodes/mknodes/mknodes/basenodes/mktabbed/metadata.toml

[metadata]
name = "MkTabbed"
icon = "mdi:tab"

[requirements.extension."pymdownx.tabbed"]
[requirements.extension."pymdownx.superfences"]

[examples.regular]
title = "Regular"
jinja = """
{{ {"Tab 1": "Some markdown", "Tab 2": "Other Markdown"} | MkTabbed}}
"""

[examples.nested]
title = "Nested"
jinja = """
{% set node = {"Tab 1": "Some markdown", "Tab 2": "Other Markdown"} | MkTabbed %}
{{ {"Tabs": node, "Admonition": mk.MkAdmonition("Nested admonition")} | MkTabbed }}
"""

[fragments.tab]
template = """
==={% if tab.new %}!{% endif %}{% if tab.select %}+{% endif %} "{{ tab.title }}"
    {{ tab.items | join(tab.block_separator) | rstrip("\n") | indent }}
    {% if tab.annotations %}
    { .annotate }

    {{ tab.annotations | indent }}
    {% endif %}
"""

[output.markdown]
template = """
{{ node.items | join(node.block_separator) }}
"""

class MkTabbed(mktabcontainer.MkTabContainer):
    """PyMdown-based Tab container."""

    items: list[mktabs.MkTab]
    REQUIRED_EXTENSIONS = [
        resources.Extension("pymdownx.tabbed"),
        resources.Extension("pymdownx.superfences"),
    ]
    Tab = mktabs.MkTab